<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>键盘事件</title>
    <script type="text/javascript" src="./js/vue.js"></script>
    <style>
        *{
            margin-top: 20px;
        }
        .demo1{
            height: 50px;
            background-color: aqua;
        }
    </style>
</head>
<body>
    <div id="root">
        <h2>键盘事件：</h2>
        
        <p>事件只触发一次</p>
        <p>
            别名：
            （大写才是真正的按键。）
            1. enter
            2. delete
            3. esc
            4. space
            5. tab
            6. up,down,right,left
            自定义键名：如：keyCodes.huiche = 13
            且类似支持链式调用
        </p>
        <input type="text" placeholder="keyup" @keyup.enter="showinfo">来点我啊</input>
    </div>


    <script type="text/javascript">
        const vm = new Vue({
            el: "#root",
            data() {
                return {
                    msg: "你怎么敢的呀！"
                }
            },
            // 事件回调
            methods:{
                showinfo(event){
                    // enter == 13
                    console.log(event.target.value)
                    // 阻止a标签的默认跳转行为。
                    // event.preventDefault();
                },
            },
        })
    </script>
</body>
</html>